<template>
    <section class="container">
        <div class="container_images">
            <img :src="iPhone6S.activeStyleUrl" alt="该产品没有照片">
        </div>
        <div class="container_details">
            <header>
                <h2>{{iPhone6S.name}}</h2>
            </header>
            <div class="details_list">
                <div>
                    <span class="list_title">描述：</span>
                    <span class="desc">{{iPhone6S.desc}}</span>
                </div>
                <div>
                    <span class="list_title">价格：</span>
                    <div class="price"><span>￥</span><span>{{iPhone6S.price}}</span></div>
                </div>
                <div>
                    <span class="list_title">外观：</span>
                    <div class="apparent">
                        <span class="apparent_btn" v-for="(item,key,index) in iPhone6S.style" :key="index" @click="changeImage({item,key})" :class="{active:item==iPhone6S.activeStyleUrl}">{{key}}</span>
                    </div>
                </div>
                <div>
                    <span class="list_title">存储容量：</span>
                    <div class="capacity">
                        <span class="capacity_btn" v-for="(item,key,index) in iPhone6S.storage" :key="index" @click="changeCapacity({item,key})" :class="{active:item==iPhone6S.price}" >{{key}}</span>
                    </div>
                </div>
            </div>
            <div class="cart_btn" :class="{disabled:!iPhone6S.isSelected}" @click="addProduct()">
                加入购物车
            </div>
        </div>
    </section>
</template>

<script>
    import {
        mapState,
        mapActions
    } from 'vuex'
    export default {
        name: 'shop',
        data() {
            return {}
        },
        created(){
            
        },
        computed:mapState(['iPhone6S', 'cart']),
        methods: {
            ...mapActions(['changeImage','changeCapacity','addProduct'])
            // changeImage(item, key) {
            //     this.iPhone6S.activeStyleUrl = item;
            //     this.iPhone6S.activeStyle = key;
            //     console.log(key)
            // },
            // changeCapacity(item, key) {
            //     this.iPhone6S.price = item;
            //     this.iPhone6S.isSelected = true;
            //     // console.log(key)
            //     this.iPhone6S.activeStorage = key;
            // },
            // addProduct() {
            //     // this.iPhone6S.totalPrice+=this.iPhone6S.price;
            //     const apparent=this.iPhone6S.activeStyle==""?"银色":this.iPhone6S.activeStyle;
            //     const arr = {
            //         "name": this.iPhone6S.name,
            //         "price": this.iPhone6S.price,
            //         "apparent": apparent,
            //         "capacity": this.iPhone6S.activeStorage,
            //         "count": 1
            //     }
            //     this.cart.push(arr)
            // }
        }
    }
</script>

<style lang="less" scoped>
    section.container {
        width: 1000px;
        margin: auto;
        display: flex;
        .container_details {
            padding: 30px 0;
            h2 {
                font-weight: bold;
            }
            .details_list {
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                padding: 20px 0;
                &>div {
                    display: flex;
                    &:first-child~div {
                        margin-top: 20px;
                    }
                    .list_title {
                        color: #95a5a6;
                        width: 80px;
                        text-align: left;
                        font-weight: 600;
                    }
                    .price span {
                        color: #c0392b;
                        font-weight: 700;
                    }
                    .apparent>.apparent_btn,
                    .capacity>.capacity_btn {
                        border: 2px solid #ccc;
                        padding: 2px 3px;
                        font-size: 13px;
                        color: #333;
                        font-weight: 600;
                        cursor: pointer;
                        &:first-child~span {
                            margin-left: 5px;
                        }
                        &.active {
                            border-color: #c0392b;
                            color: #c0392b;
                        }
                    }
                }
            }
            .cart_btn {
                margin-top: 40px;
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                background-color: #d9534f;
                border-radius: 10px;
                cursor: pointer;
            }
        }
    }
    .disabled {
        pointer-events: none;
        opacity: .65;
    }
</style>


